<template>
    <el-drawer v-if="icon && icon !== ''" :visible.sync="data.show" :show-close="false" :withHeader="false" :wrapperClosable="false" :size="360">
        <div class="icon-panel">
            <el-alert title="所有的图标将通过代码的形式新增进来。" type="info" :closable="false"></el-alert>
            <div class="content">
                <i v-for="item in iconList" :key="item.value" :class="['icon', item.icon, { active: selectIcon === item.icon }]" @click="handleSelectIcon(item.icon)"></i>

                <!-- <i class="el-icon-edit icon"></i>
                <i class="el-icon-s-tools icon"></i>
                <i class="el-icon-setting icon"></i>
                <i class="el-icon-edit icon"></i>
                <i class="el-icon-edit icon"></i>
                <i class="el-icon-edit icon"></i>
                <i class="el-icon-edit icon"></i>
                <i class="el-icon-edit icon"></i>
                <i class="el-icon-edit icon"></i> -->
            </div>
        </div>
        <div class="drawer-footer">
            <el-button size="medium" @click="handleCansel">{{ $t('device.instruction-parsing.830424-37') }}</el-button>
            <el-button type="primary" size="medium" @click="handleSave">{{ $t('components.Crontab.index.464657-9') }}</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'IconPanel',
    props: {
        data: {
            show: false,
        },
        icon: {
            type: String,
            default: '',
        },
        templateId: {
            type: Number,
            default: 1,
        },
    },
    data() {
        return {
            iconList: [
                {
                    name: 'el-icon-edit',
                    icon: 'el-icon-edit',
                },
                {
                    name: 'el-icon-s-tools',
                    icon: 'el-icon-s-tools',
                },
                {
                    name: 'el-icon-view',
                    icon: 'el-icon-view',
                },
                {
                    name: 'el-icon-document',
                    icon: 'el-icon-document',
                },

                {
                    name: 'el-icon-menu',
                    icon: 'el-icon-menu',
                },
            ],
            selectIcon: 'el-icon-edit',
        };
    },
    computed: {
        ...mapState({
            currentproperties: (state) => state.dragEditor.currentproperties,
        }),
    },
    mounted() {
        this.init();
    },
    watch: {
        icon: {
            handler(val) {
                this.init();
            },
            deep: true,
        },
    },
    methods: {
        init() {
            this.selectIcon = this.icon;
        },
        handleSelectIcon(icon) {
            this.selectIcon = icon;
        },
        handleSave() {
            const { setConfig } = this.currentproperties;

            setConfig.attributes.forEach((item) => {
                if (item.templateId === this.templateId) {
                    item.icon = this.selectIcon;
                }
            });

            this.$nextTick(() => {
                this.data.show = false;
            });
            this.selectIcon = 'el-icon-edit';
        },
        handleCansel() {
            this.$nextTick(() => {
                this.data.show = false;
            });
            this.selectIcon = 'el-icon-edit';
        },
    },
};
</script>

<style lang="scss" scoped>
.icon-panel {
    padding: 20px;

    .content {
        margin-top: 20px;
        padding: 0 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-y: auto;

        .icon {
            width: 50px;
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 10px;
        }
        .active {
            background: #486ff2;
            color: #fff;
        }
    }
}
.drawer-footer {
    position: fixed;
    bottom: 20px;
    right: 10px;
}
</style>
